<template>
  <div class="out_div">
    <div v-if="currentMode === currentModeList.LIST" class="baseList">
      <el-form class="searchForm" ref="quartzJobSearchForm" size="small" :model="quartzJobSearchForm">
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item prop="name" label="任务名:">
              <el-input clearable placeholder="请输入任务名" v-model="quartzJobSearchForm.name" name="name" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button icon="el-icon-search" type="primary" size="mini" @click="searchQuartzJobHandler">查询 </el-button>
            <el-button icon="el-icon-refresh-right" type="info" size="mini" @click="resetQuartzJobHandler">重置 </el-button>
          </el-col>
        </el-row>
      </el-form>
      <toolbar @on-add="addQuartzJobHandler" @on-getJobList="getJobListHandler" :privileges="btnPrivileges" :keys="['add','getJobList']" />
      <paginatable
        :keys="['edit', 'del', 'active', 'freeze', 'runTask']"
        :privileges="btnPrivileges"
        v-loading="quartzJobTblOpts.loading"
        @row-edit="editQuartzJobHandler"
        @row-del="delQuartzJobHandler"
        @row-freeze="freezeHandler"
        @row-active="activeHandler"
        @row-runTask="runTaskHandler"
        @on-pagination="paginationQuartzJobHandler"
        :tblOpts="quartzJobTblOpts"
      />
    </div>
    <el-container v-if="currentMode === currentModeList.EDIT" class="baseEdit">
      <el-header style="height: 35px;padding: 0">
        <el-row>
          <el-col :span="12">
            <el-page-header @back="backHandler" content="编辑"> </el-page-header>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-form v-loading="formLoading" class="editForm" size="small" label-width="120px" :model="quartzJobEditForm" :rules="rules" ref="quartzJobEditForm">
          <el-form-item class="hidden" prop="id">
            <el-input v-model="quartzJobEditForm.id" type="hidden" />
          </el-form-item>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item label="任务名:" prop="name">
                <el-input clearable style="width: 100%" v-model="quartzJobEditForm.name" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item label="任务bean名:" prop="beanName">
                <el-input clearable style="width: 100%" v-model="quartzJobEditForm.beanName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item label="cron表达式:" prop="cronExpression">
                <el-input clearable style="width: 100%" v-model="quartzJobEditForm.cronExpression" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="10">
              <el-form-item label="备注:" prop="memo">
                <el-input clearable style="width: 100%" v-model="quartzJobEditForm.memo" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <toolbar @on-save="saveQuartzJobHandler" :privileges="btnPrivileges" :keys="['save']" />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import paginatable from '@/components/paginatable'
import toolbar from '@/components/toolbar'
import * as tools from '@/utils/tools'
import * as quartzJobApi from '@/api/systool/quartz/quartz'
import * as menuApi from '@/api/sys/menu'

export default {
  name: 'quartz',
  data() {
    return {
      title: '',
      currentModeList: this.$config.currentShow,
      currentMode: this.$config.currentShow.LIST,
      formLoading: false,
      quartzJobSearchForm: {
        id: '',
        name: '',
        groupName: '',
        beanName: '',
        methodName: '',
        cronExpression: '',
        concurrent: '',
        memo: '',
        status: ''
      },
      quartzJobEditForm: {
        id: '',
        name: '',
        groupName: '',
        beanName: '',
        methodName: '',
        cronExpression: '',
        concurrent: '',
        memo: '',
        status: ''
      },
      quartzJobTblOpts: {
        fitCols: false,
        loading: false,
        buttonColWidth: 380,
        cols: [
          {
            width: 150,
            prop: 'name',
            label: '任务名'
          },
          {
            width: 150,
            prop: 'beanName',
            label: '任务bean名'
          },
          {
            width: 300,
            prop: 'cronExpression',
            label: 'cron表达式'
          },
          {
            width: 200,
            prop: 'memo',
            label: '备注'
          },
          {
            width: 150,
            prop: 'status',
            label: '状态',
            formatter: row => {
              if (row.status === 0) {
                return '冻结'
              } else if (row.status === 1) {
                return '激活'
              }
            }
          }
        ],
        data: [],
        selection: []
      },
      btnPrivileges: [],
      searchQuartzJobConditions: [],
      rules: {
        name: [
          {
            required: true,
            message: '请填写任务名称',
            trigger: 'blur'
          }
        ],
        beanName: [
          {
            required: true,
            message: '请填写bean名称',
            trigger: 'blur'
          }
        ],
        cronExpression: [
          {
            required: true,
            message: '请填写cron表达式',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  components: {
    paginatable,
    toolbar
  },
  methods: {
    getJobListHandler(){
      quartzJobApi.getAllRunningJob().then(res=>{
        console.log("请求成功")
      })
    },
    resetQuartzJobHandler() {
      this.$refs.quartzJobSearchForm.resetFields()
      this.searchQuartzJobHandler()
    },
    clearEdit() {
      if (this.$refs.quartzJobEditForm) {
        this.$refs.quartzJobEditForm.resetFields()
      }
    },
    backHandler() {
      this.formLoading = false
      this.currentMode = this.$config.currentShow.LIST
      this.clearEdit()
      this.paginationQuartzJobHandler()
    },
    async saveQuartzJobHandler() {
      let valid = await this.$refs.quartzJobEditForm.validate()
      if (valid) {
        this.formLoading = true
        quartzJobApi
          .save(this.quartzJobEditForm)
          .then(resp => {
            this.formLoading = true
            tools.notify({
              type: 'success',
              message: '保存成功'
            })
            this.backHandler()
          })
          .catch(resp => {
            this.formLoading = false
          })
      } else {
        tools.notify({
          type: 'warning',
          message: '请按要求填写'
        })
      }
    },
    runTaskHandler(row) {
      this.$confirm('确定要立即执行一次吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          quartzJobApi.run(row.id).then(resp => {
            this.paginationQuartzJobHandler(this.quartzJobTblOpts.pageNo)
            tools.notify({
              type: 'success',
              message: '立即执行成功'
            })
          })
        })
        .catch(() => {})
    },
    freezeHandler(row) {
      this.$confirm('确定要冻结这个任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          quartzJobApi.pause(row.id).then(resp => {
            this.paginationQuartzJobHandler(this.quartzJobTblOpts.pageNo)
            tools.notify({
              type: 'success',
              message: '冻结成功'
            })
          })
        })
        .catch(() => {})
    },
    activeHandler(row) {
      this.$confirm('确定要激活这个任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          quartzJobApi.resume(row.id).then(resp => {
            this.paginationQuartzJobHandler(this.quartzJobTblOpts.pageNo)
            tools.notify({
              type: 'success',
              message: '激活成功'
            })
          })
        })
        .catch(() => {})
    },
    delQuartzJobHandler(row) {
      this.$confirm('确定要删除这个任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          quartzJobApi.del(row.id).then(resp => {
            this.paginationQuartzJobHandler(this.quartzJobTblOpts.pageNo)
            tools.notify({
              type: 'success',
              message: '删除成功'
            })
          })
        })
        .catch(() => {})
    },
    addQuartzJobHandler() {
      this.title = '新增'
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
    },
    editQuartzJobHandler(row) {
      this.title = '编辑'
      this.currentMode = this.$config.currentShow.EDIT
      this.clearEdit()
      quartzJobApi.load(row.id).then(resp => {
        tools.assignVal(this.quartzJobEditForm, resp.data)
      })
    },
    searchQuartzJobHandler() {
      this.searchQuartzJobConditions = []
      if (this.quartzJobSearchForm.name) {
        let val = this.quartzJobSearchForm.name
        this.searchQuartzJobConditions.push({
          field: 'name',
          operator: 'like',
          values: val instanceof Array ? [...val] : [val]
        })
      }
      this.paginationQuartzJobHandler()
    },
    paginationQuartzJobHandler(pageNo) {
      this.$set(this.quartzJobTblOpts, 'pageNo', pageNo || 1)
      this.quartzJobTblOpts.loading = true
      quartzJobApi.pagination(this.quartzJobTblOpts, this.searchQuartzJobConditions).then(resp => {
        this.quartzJobTblOpts.data = resp.data.records
        Object.assign(this.quartzJobTblOpts, { total: Number(resp.data.total) })
        this.quartzJobTblOpts.loading = false
      })
    }
  },
  mounted() {
    let menuId = this.$route.meta.id
    menuApi.getMenuBtn(menuId).then(resp => {
      this.btnPrivileges = resp.data
    })
    this.paginationQuartzJobHandler()
  }
}
</script>
